<template>
  <s-table
    :row-selection="rowSelection"
    v-model:pagination="pagination"
    :columns="columns"
    :data-source="dataSource"
    :scroll="{ y: 400, x: 2000 }"
  >
    <template #bodyCell="{ column }">
      <template v-if="column.key === 'operation'">
        <a>批改</a>
      </template>
    </template>
  </s-table>
</template>
<script lang="ts">
import { defineComponent, ref } from "vue";
import { STable, STableProps } from "@surely-vue/table";
import { Key } from "ant-design-vue/lib/table/interface";

interface DataItem {
  key: number;
  name: string;
  age: number;
  address: string;
}

interface DataType {
  key: string;
  name: string;
  age: number;
  address: string;
}

// const rowSelection: STableProps["rowSelection"] = {
//   onChange: (selectedRowKeys: Key[], selectedRows: DataType[]) => {
//     console.log(
//       `selectedRowKeys: ${selectedRowKeys}`,
//       "selectedRows: ",
//       selectedRows
//     );
//   },
// };
export default defineComponent({
  components: { STable },
  setup() {
    const columns = [
      {
        title: "姓名",
        dataIndex: "name",
        fixed: "left",
        width: 150,
        rowDrag: true,
      },
      {
        title: "年龄",
        dataIndex: "age",
        width: 150,
        resizable: true,
      },
      {
        title: "家庭住址",
        dataIndex: "address",
        width: 150,
        resizable: true,
      },
      {
        title: "申请原因",
        dataIndex: "reason",
        width: 150,
        resizable: true,
      },
      {
        title: "申请金额",
        dataIndex: "amount",
        width: 150,
        resizable: true,
      },
      {
        title: "材料审核",
        dataIndex: "review",
        width: 150,
        resizable: true,
      },
      { title: "Column 5", dataIndex: "address" },
      {
        title: "编辑",
        key: "operation",
        fixed: "right",
        width: 100,
        resizable: true,
      },
    ];
    const data: DataItem[] = [];
    for (let i = 0; i < 1000; i++) {
      data.push({
        key: i,
        name: `Edrward ${i}`,
        age: i + 1,
        address: `London Park no. ${i}`,
      });
    }
    return {
      dataSource: ref(data),
      columns: ref(columns),
    };
  },
});
</script>
